<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div>
        用户名：<input type="text" v-model.lazy="uname">
    </div>
    <span>{{tip}}</span>

</div>
<script type="text/javascript" src="js/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            uname: '',
            tip: ''
        },
        methods: {
            checkName: function (val) {
                var that = this;
                setTimeout(function () {
                    if (val == "admin") {
                        that.tip = "此用户名已存在，请更换";
                    } else {
                        that.tip = "此用户名可用";
                    }
                }, 2000)
            }
        },
        watch: {
            uname: function (val) {
                this.checkName(val);
                this.tip = "正在验证，请稍后。。。"
            }
        }
    })
</script>
</body>
</html>